<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
</body>

<script>
    // $.ajax({
    //     url: "https://autumnfish.cn/search",
    //     data: {
    //         keywords: "海阔天空"
    //     },
    //     dataType: "JSON",
    //     method: "GET",
    //     success: (res) => {
    //         console.log(res);
    //     }
    // })

    // 创建异步对象
    // var xhr = new XMLHttpRequest()
    // xhr.open('get',"https://autumnfish.cn/search?keywords=国际歌")
    // xhr.send()
    // xhr.onreadystatechange = function(e){
    //     if(xhr.readyState == 4 && xhr.status==200){
    //         console.log(JSON.parse(xhr.responseText));
    //     }
    // }



    function myAjax({ url, method, data, success }) {
        let ajax = new XMLHttpRequest();

        if (method.toLowerCase() == 'get') {
            if (data) {
                url += '?'
                for (let key in data) {
                    url += `${key}=${data[key]}` + '&'
                }
            }
            ajax.open(method, url)
            ajax.send()
        } else {
        }

        // 注册事件
        ajax.onreadystatechange = function(){
            if(ajax.readyState==4&&ajax.status==200){
                success(ajax.responseText)
            }
        }
    }
    myAjax({
        url: "https://autumnfish.cn/search",
        method: "GET",
        data: {
            keywords: "1"
        },
        success: function(res){
            console.log(res);
        }
    })
</script>

</html>